<template>
    <div class="father">
        公司：{{company}}家 
        <button @click="changeBigChild">修改大儿子的工作</button>
        <button @click="changeSmallChild">修改小儿子的公司</button>
        <!-- $refs 拿所有儿子 -->
        <button @click="changeChildsMoney($refs)">修改儿子们的薪资</button>
        <Child1 ref="bigSon"/>
        <Child2 ref="smallSon"/>
    </div>
</template>
<script setup   lang="ts">
import {ref} from 'vue'
import Child1 from './Child1.vue'
import Child2 from './Child2.vue'

let company = ref(6);
let bigSon = ref();
let smallSon = ref();

defineExpose({company})

function changeBigChild(){
    bigSon.value.actor = '继承家业';
// console.log("ref引出的child1组件实例=",bigSon.value);
}

function changeSmallChild(){
    console.log("ref引出的child2组件实例=",smallSon.value);
    smallSon.value.internet = '高科技公司';
}

//父给子进行通讯
function changeChildsMoney(refs:any){
    //refs是reactive对象，所以refs可以不.value。★
    for(let key in refs){
        refs[key].money += 100;
    }
}
</script>
<style scoped>
.father{
    padding: 60px;
    width: 70vw;
    height: 60vh;
    background-color: rgb(146, 239, 112);
}
</style>
